<!DOCTYPE html>
<html>
<head>
    <title>callback test</title>
</head>
<body>
    <div id="xx">xuxuan</div>
<script>

/*不生效*/
/*var myapp = {};
myapp.color = "green";
myapp.paint = function(node){
    node.style.color = this.color;
}

var findNodes = function(callback){      
    var node = document.getElementById("xx");
    if(typeof callback === "function"){
        callback(node);
    }
}

findNodes(myapp.paint);*/




/*不生效*/
/*var myapp = {};
myapp.color = "green";
myapp.paint = function(node){
    node.style.color = this.color;
}

var findNodes = function(callback, node){      
    if(typeof callback === "function"){
        callback(node);
    }
}

findNodes(myapp.paint, document.getElementById("xx"));*/





/*生效*/
/*var myapp = {};
myapp.color = "green";
myapp.paint = function(node){
    node.style.color = this.color;
}

var findNodes = function(callback){      
    if(typeof callback === "function"){
        callback();
    }
}

findNodes(myapp.paint(document.getElementById("xx")));*/





/*生效*/
/*var myapp = {};
myapp.color = "green";
myapp.paint = function(node){
    node.style.color = this.color;
}

var findNodes = function(callback, callback_obj){
    
    var node = document.getElementById("xx");

    if(typeof callback === "function"){
        callback.call(callback_obj, node);
    }
    if (typeof callback === "string") {
        callback_obj[callback].call(callback_obj, node);
    }

}

findNodes(myapp.paint, myapp);
findNodes("paint", myapp);*/



/*生效*/
/*
对于__bind方法 return 又return，初看起来有点困惑，这里在啰嗦两句：
这里两次return，所以调用就有两个括号：
__bind(fn, me)(arguments)；*/
/*__bind = function(fn, me){ 
    return function(){ 
        return fn.apply(me, arguments); 
    }; 
};

var myapp = {};
myapp.color = "green";
myapp.paint = function(node){
    node.style.color = this.color;
}
var findNodes = function(callback, callback_obj){      
    var node = document.getElementById("xx");
    if(typeof callback === "function"){
        // callback = __bind(callback, callback_obj);
        // console.log(callback)
        // callback(node);

        // callback, callback_obj 这两个参数对应__bind的fn,me
        // node参数对应arguments
        __bind(callback, callback_obj)(node);
    }
}

findNodes(myapp.paint, myapp);*/




/*生效*/
// 如果就想一次性调用，并且参数是一个，用call
/*__bind = function(fn, me, param){ 
    fn.call(me, param); 
};

var myapp = {};
myapp.color = "green";
myapp.paint = function(node){
    node.style.color = this.color;
}
var findNodes = function(callback, callback_obj){      
    var node = document.getElementById("xx");
    if(typeof callback === "function"){
        __bind(callback,callback_obj,node)
    }
}
findNodes(myapp.paint, myapp);*/

/*生效*/
/*__bind = function(fn, me, param){ 
    fn.apply(me, param); 
};

var myapp = {};
myapp.color = "green";
myapp.paint = function(node){
    node.style.color = this.color;
}
var findNodes = function(callback, callback_obj){      
    var node = document.getElementById("xx");
    if(typeof callback === "function"){
        __bind(callback,callback_obj,[node])
    }
}
findNodes(myapp.paint, myapp);*/




/*生效*/
// 如果就想一次性调用， 并且参数多个，还是要用apply， param是一个数组
/*__bind = function(fn, me){ 
    return function(){ 
        return fn.apply(me, arguments); 
    }; 
};

var myapp = {
    color : "green",
    paint : function(node){
        node.style.color = this.color;
        // console.log(this);
    }
};

myapp.paint = __bind(myapp.paint, myapp)

var findNodes = function(callback){      
    var node = document.getElementById("xx");
    if(typeof callback === "function"){
        callback(node);
    }
}

findNodes(myapp.paint);*/


/*生效*/
/*__bind = function(fn, me){ 
    return function(){ 
        return fn.apply(me, arguments); 
    }; 
};

function myapp(){
    this.color = "green";
    this.paint = __bind(this.paint, this);
}

myapp.prototype.paint = function(node){
    console.log(this)  //如果没有this.paint = __bind(this.paint, this); this打印出来的是window
    node.style.color = this.color;
}

var findNodes = function(callback){      
    var node = document.getElementById("xx");
    if(typeof callback === "function"){
        callback(node);
    }
}

var myappInstance = new myapp();
findNodes(myappInstance.paint);
*/


/*生效*/
/*var myapp = {};
myapp.color = "green";
myapp.paint = function(node){
    node.style.color = this.color;
}

var findNodes = function(callback, callback_obj){
    
    var node = document.getElementById("xx");

    if(typeof callback === "function"){
        // ES5为所有的Function 对象引入一个新的bind 方法，它实现下面的行为：
        // fn = callback.bind(callback_obj);
        // fn(node);
        callback.bind(callback_obj)(node);
    }
}

findNodes(myapp.paint, myapp);*/



/*生效*/
/*var Myapp = function() {
    this.color = 'green'
}
Myapp.prototype.paint = function(node) {
    console.log(this)
    node.style.color = this.color;
}


var NodeHandler = function() {
    this.dom = document.getElementById("xx");
}

NodeHandler.prototype.changeColor = function(callback, callback_obj) {
    if(typeof callback === 'function') {
        callback.bind(callback_obj)(this.dom);
    }
}

var myapp = new Myapp();
var nodeHandler = new NodeHandler();
nodeHandler.changeColor(myapp.paint, myapp);

*/

</script>
</body>
</html>